<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">111</div>

    <script>
        //对象的更新
        //1.键和键值相同的时候可以省略
        // let myname = "张三";
        // let obj = {
        //     myname,
        //     age: 20
        // }
        // console.log(obj); // {myname: '张三', age: 20}

        //2.对象里函数写法更新
        // let obj = {
        //     name: "张三",
        //     age: 20,
        //     fn: function () {
        //         console.log("fn");
        //     }
        // }

        // let obj = {
        //     name: "张三",
        //     age: 20,
        //     fn() {
        //         console.log("fn", this);
        //     },
        //     hobby() {
        //         console.log("喜欢篮球");
        //     }
        // }
        // obj.fn(); // {name: '张三', age: 20, fn: ƒ, hobby: ƒ}

        //3.键名更新
        //对象的键名都会自动转为字符串
        let myname = "李四";
        let myage = "age";
        let myobj = {};
        let ele = document.querySelector(".box");
        let obj = {
            myname: myname,
            [myage]: 20,
            [1 + 2]: "hello",
            [myobj]: "对象",
            [ele]: "red"
        }
        console.log(obj); // {3: 'hello', myname: '李四', age: 20, [object Object]: '对象', [object HTMLDivElement]: 'red'}
        for (let key in obj) {
            console.log(typeof key); // string * 5
        }
    </script>
</body>

</html>